<!DOCTYPE HTML>
<html>

<head>
    <title>Test My WebSocket</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <script src="jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script src="bootstrap.min.js"></script>
    <style>
        .row {
            margin-bottom: 30px;
        }

        .form-control {
            width: 70%;
        }

        .red {
            color: red;
            font-size: 30px;
            font-weight: 600;
        }

        .blue {
            color: red;
            font-size: 30px;
            font-weight: 600;
        }

        .green {
            color: green;
            font-size: 20px;
            font-weight: 500;
        }
    </style>
</head>

<body>

    TestWebSocket
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-8">
                    请输入你的id信息 <input type="text" id="userid"><br>
                    当前用户为
                    <div id="kk"></div>
                </div>
                <div class="col-lg-4">
                    <button onclick="start()" class="btn btn-primary">开始连接</button>
                </div>
            </div>
        </div>
    </div>



    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">

                <div class="col-lg-4">
                    正在聊天对象
                    <div id="to" class="blue"> 对象为无，不能发送任何消息,请点击在线人数列表</div>
                    <div class="green"> 聊天框信息，</div>
                    <div id="chat"></div>
                </div>
                <div class="col-lg-8">
                    全局消息
                    <div id="message" class="red"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-4">
                    需要你发送的数据
                    <input id="text" type="text" />
                    <button onclick="send()" class="btn btn-primary">发送消息</button>
                </div>

                <div class="col-lg-4">
                    在线好友人数<div id="number"></div>
                    <div>
                        <ul id="friend">
                            <li><a href="javascript:;" class="change"></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4">
                    <button onclick="closeWebSocket()" class="btn btn-primary">CLOSE</button>
                </div>
            </div>
        </div>
    </div>






</body>

<script type="text/javascript">
    // 当前的socket 连接
    var websocket = null;
    // 当前用户的id
    var userid = null;

    // 发送的对象
    var to = null;

    // 在线的用户
    var onlineUsers = null;

    // 所有聊天的记录
    var dataMessage = new Map();

    // 点击用户可以进行聊天
    $(function () {
        // 设置监听事件
        $('body').on('click', '.change', function () {
            to = $(this).html();
            $("#to").html(to);
            console.log(dataMessage);
            var temp = dataMessage.get(to);
            if (temp != null) {
                // 修改文本框
                changechat();
            }
        })

    });
    // 开始连接
    function start() {
        userId = $("#userid").val();
        $("#kk").html(userId);

        if (userid == null && userId == "") {
            $("#message").html("<p>请输入你的id</p>");
            return;
        }


        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            //连接WebSocket节点
            websocket = new WebSocket("ws://localhost:8080/chat/" + userId);
        } else {
            alert('Not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };
        //连接成功建立的回调方法
        websocket.onopen = function (event) {

            $("#message").append("<p>自己连接成功</p>");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            var data = JSON.parse(event.data);
            //  1表示有人上线了
            setMessageInnerHTML(data);
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("close");
        }


        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }

    }

    // 修改 在线人数信息
    function changeFriend() {
        $("#friend").html("");
        for (var i = 0; i < onlineUsers.length; i++) {
            if (onlineUsers[i] == userId) {
                continue;
            }
            $("#friend").append(" <li><a href='javascript:;' class='change'>" + onlineUsers[i] + "</a></li>");
        }
        $("#number").html(onlineUsers.length - 1);

    }

    // 修改聊天框内容
    function changechat() {
        var temp = dataMessage.get(to);
        // console.log(temp);
        if (temp != null) {
            var html = "";
            for (var i = 0; i < temp.length; i++) {
                html += temp[i];
            }
            console.log(html);
            $("#chat").html(html);
        }

    }
    //将消息显示在网页上
    function setMessageInnerHTML(data) {

        // 接受数据格式
        // messageType
        // 1. 表示有人上线
        // 2. 表示有人下线
        // 3. 表示所有在线的人
        // 4. 表示就是某个人的信息
        // userId

        if (data.messageType == 1) {
            var id = data.userId;
            if (!onlineUsers.includes(id)) {
                // 添加用户id
                onlineUsers.push(data.userId);
                // 全局广播
                $("#message").append("<p>" + data.userId + "上线了</p>");
                changeFriend();
            }
            // 2.表示有人下线
        } else if (data.messageType == 2) {
            // 否则就是某个人发送的信息

            // 3 表示在线名单，需要刷新在线名单
        } else if (data.messageType == 3) {
            // 否则就是某个人发送的信息
            onlineUsers = data.onlineUsers;
            // console.log(onlineUsers);
            changeFriend();
            // 清空所有数据 

        } else {
            // 否则就是某个人发送的信息
            // 首先添加到id 时 
            // console.log("type 类型为4 发送信息的 为" + data.textMessage);
            var id = data.fromuserId;
            var kk = dataMessage.get(id);

            // 说明不是第一次聊天
            if (kk != null) {
                kk.push("<p style='text-align: left; color: blue;'>" + id + " 说了--" + data.textMessage + "</p>");
                dataMessage.set(id, kk);
            } else {
                var arr = new Array();
                arr.push("<p style='text-align: left ; color: blue;' >" + id + " 说了--" + data.textMessage + "</p>");
                dataMessage.set(id, arr);
            }
            console.log(dataMessage);
            // 如果当前聊天框和发送信息的id 一样，就需要改变聊天框内容
            if (to == id) {
                changechat();
            }
        }
    }


    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }


    //发送消息
    function send() {

        if (userId != null && to != null) {
            var kk = dataMessage.get(to);
            var mm = "<p  style='text-align: right; color: red;'>" + $("#text").val() + " -----我自己了</p>";

            if (kk != null) {
                kk.push(mm);
                dataMessage.set(to, kk);
            } else {
                var arr = new Array();
                arr.push(mm);
                dataMessage.set(to, arr);
            }
            changechat();
            var message = {
                // 发送的信息
                message: $("#text").val(),
                //  发送者的对象
                userId: userId,
                // 接受者对象id
                to: to
            }
            // 把文本框变成空
            $("#text").val("");
            websocket.send(JSON.stringify(message));
        }


    }
</script>

</html>